<template>
    <div class="main">
        <h2>我的订单</h2>
        <div v-if="!orders" class="order-container" style="text-align: center">暂无订单消息</div>
        <div v-else class="order-container">
            <div class="order-item head">
                <div class="goods">宝贝</div>
                <div class="price">单价</div>
                <div class="price">数量</div>
                <div class="express">物流</div>
            </div>
            <div v-for="(item, index) in orders" :key="index" class="order">
                <div class="head order-code">{{item.time}}  订单号：{{item._id}}</div>
                <div v-for="(goods, index1) in item.goodsMessage" :key="index1" class="order-item">
                    <div class="goods" @click="goToDeatil(goods.id)">
                        <img :src="goods.showUrl" alt="">
                        <div>
                            <p>{{goods.name}}</p>
                            <p>商品参数：{{goods.params}}</p>
                        </div>

                    </div>
                    <div class="price goods-price">￥{{goods.price}}</div>
                    <div class="price">{{goods.num}}</div>
                    <div class="express"><span v-if="goods.lssue">暂无物流信息</span><span v-else>物流单号：75326571783892</span></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {sendwithpost} from "../../../network/profile";

    export default {
        name: "Order",
        data() {
            return {
                orders: null
            }
        },
        created() {
            if (this.$store.state.lognUser) {
                sendwithpost({
                    url: '/getOrder',
                    data: {
                        id: this.$store.state.lognUser._id
                    }
                }).then(res=> {
                    if (res.data.res_code == 2) {
                        this.orders = res.data.orders.reverse()
                    }else {
                        return
                    }
                })
            }
        },
        methods: {
            goToDeatil(id) {
                this.$router.push({path: '/detail', query:{
                        goodsId: id
                    }})
            }
        }
    }
</script>

<style scoped>
    .order-container {
        padding-bottom: 20px;
        border-bottom: 2px solid #000000;
    }
    .order-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }
    .order-item > * {
        margin: 0 1em;
        font-size: 0.7em;
        text-align: center;
    }
    .head {
        font-size: 1.2em;
        font-weight: 600;
        background-color: #F5F5F5;
        height: 40px;
        line-height: 40px;
    }
    .order-item img {
        width: 80px;
        height: 80px;
        overflow: hidden;
    }
    .order-item .goods {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 1;
        text-align: center;
        cursor: pointer;
    }
    .order-item .price {
        min-width: 50px;
    }

    .order-item .express {
        min-width: 170px;
    }
    .order-code {
        font-size: 0.8em;
        font-weight: 100;
        text-indent: 2em;
    }
    .order {
        border: 1px solid #BFBFBF;
    }
    .goods-price {
        font-weight: 700;
        color: #999999;
    }
    .goods p:nth-child(1):hover {
        color: var(--main-color);
    }
</style>